<template>
	<view class="contents">
		<!-- 这里是状态栏 -->
		<view class="status_bar"></view>
		<!-- 导航 -->
		<view class="nav">
			<view class="nav-left">
				<u-icon name="arrow-down" size="25" @click="goback"></u-icon>
			</view>
			<view class="nav-center">
				<text class="nav-center-tx1" v-if="userData">{{ userData.name }}</text>
				<text class="nav-center-tx2" v-if="userData">{{ userData.ar[0].name }}</text>
			</view>
			<view class="nav-right">
				<u-icon name="share" size="25"></u-icon>
			</view>
		</view>

		<!-- 背景图 -->
		<view class="contents-bg" :style="{ backgroundImage: 'url(' + userData.al.picUrl + ')' }"></view>

		<!-- 图片旋转 -->
		<view class="contents-play" @click="lycs">
			<view class="contents-play-rotation" v-if="lys">
				<image src="@/static/icon/play-bar.png" class="contents-play-rotation-needle" :class="audio.playing ? 'needle' : 'active'"></image>
				<image src="@/static/icon/disc.png" class="contents-play-rotation-disc"></image>
				<image lazy-load :src="userData.al.picUrl" class="contents-play-rotation-playimg" :class="audio.playing ? 'play ' : 'stop'" mode="aspectFit"></image>
			</view>
			<!-- 歌词 -->
			<view class="" v-else>
				<Lyrics :lyricIndex="lyricIndex" :height="lyricHight"></Lyrics>
			</view>
		</view>
		<!-- 喜欢和评论 -->

		<view class="likes">
			<view class="likes-left">
				<u-icon name="heart" size="60rpx" color="#fff"></u-icon>
			</view>
			<view class="likes-right">
				<u-icon name="chat" size="70rpx" color="#fff"></u-icon>
			</view>
		</view>
		<!-- 进度条 -->
		<view class="contents-duration">
			<view class="contents-duration-left">{{ format(current) }}</view>
			<view class="contents-duration-progress">
				<u-slider active-color="red" :max="100" v-model:value="slideWidth" step="1" @change="changeCurrentTime" @changing="moveing"></u-slider>
			</view>
			<view class="contents-duration-right">{{ format(duration) }}</view>
		</view>
		<!-- 底部按钮 -->
		<view class="contents-footer-buttom">
			<!-- 播放模式 -->
			<text class="iconfont modes" :class="currentModeIcon" @tap="toggleLoopMode"></text>
			<!-- 上一首 -->
			<image src="@/static/icon/Last-song.png" mode="" @click="lastSong"></image>
			<!-- 暂停、播放 -->
			<view class="contents-footer-buttom-play">
				<image src="@/static/icon/plays.png" v-if="audio.playing" @tap="onplay"></image>
				<image src="@/static/icon/suspend.png" v-else @tap="onpause"></image>
			</view>
			<!-- 下一首 -->
			<image src="@/static/icon/Next-song.png" mode="" @click="audioEnd"></image>
			<!-- 播放列表 -->
			<image src="@/static/icon/play-list.png" mode="" @click="show = true"></image>
		</view>
		<!-- 播放列表弹出层 -->
		<view class="contents-popup">
			<u-popup :show="show" @close="close" :customStyle="popupStyle" round="20">
				<CurrentPlay></CurrentPlay>
			</u-popup>
		</view>
	</view>
</template>

<script>
import moment from 'moment';
import Lyrics from '@/components/Lyrics.vue';
import CurrentPlay from '@/components/CurrentPlay.vue';

// import {
// 	getLikeMusic
// } from '@/http/songs.js'
export default {
	components: {
		Lyrics,
		CurrentPlay
	},
	data() {
		return {
			mid: '',
			lys: true, //图片和歌词切换
			lrcs: '', //把歌词储存起来
			current: 0, //当前进度(s)
			duration: 0, //总时长(s)
			innerAudio: getApp().globalData.audio,
			seek: false, //是否处于拖动状态
			show: false,
			popupStyle: {
				width: '90%',
				margin: '0 auto',
				background: '#2f3164'
			},
			slideWidth: 0,
			playlist: '', //保存的数据
			lyricHight: 0,
			lyricIndex: 0,
			loopMode: 'list', //播放模式
			shuffledList: [] // 随机模式下的乱序列表（用于避免重复随机）
			// audio:null,
		};
	},

	methods: {
		//播放
		onplay() {
			this.$store.dispatch('playAudio', false);
			this.innerAudio.pause();
		},
		// 暂停
		onpause() {
			this.$store.dispatch('playAudio', true);
			this.innerAudio.play();
		},
		// 下一首
		audioEnd() {
			switch (this.loopMode) {
				case 'single':
					this.$store.dispatch('increasePlayIndex');
					break;
				case 'list':
					this.innerAudio.currentTime = 0;
					this.innerAudio.play();
					break;
				case 'shuffle':
					this.$store.dispatch('randomPlayIndex');
					break;
			}
		},

		// 上一首
		lastSong() {
			this.$store.dispatch('decreasePlayIndex');
		},
		playEnd() {
			this.onEnded(() => {
				console.log('结束了');
			});
		},
		// 点击跳到指定位置
		changeCurrentTime() {
			const pr = (this.slideWidth / 100) * this.duration;
			// this.current = pr
			this.innerAudio.seek(pr);
			// index = this.cTime
		},
		// 播放模式
		toggleLoopMode() {
			const modes = ['list', 'single', 'shuffle'];
			this.loopMode = modes[(modes.indexOf(this.loopMode) + 1) % 3];
		},

		//返回首页
		goback() {
			uni.navigateBack({
				data: 1
			});
		},

		//关闭Popup 弹出层
		close() {
			this.show = false;
		},
		//切换图片和歌词
		lycs() {
			this.lys = !this.lys;
			console.log(this.lys);
		},

		moveing() {
			this.innerAudio.play();
		},
		// 时间处理
		format(num) {
			return '0'.repeat(2 - String(Math.floor(num / 60)).length) + Math.floor(num / 60) + ':' + '0'.repeat(2 - String(Math.floor(num % 60)).length) + Math.floor(num % 60);
		},

		currtenlyricupdate() {
			this.innerAudio.onTimeUpdate(() => {
				let currentimer = this.innerAudio.currentTime.toFixed(2);
				for (let currentlyric = 1; currentlyric < this.lyrics.length; currentlyric++) {
					if (currentimer < this.lyrics[currentlyric].time) {
						let newindex = currentlyric - 1;
						this.lyricHight = 220 - newindex * 20;
						return (this.lyricIndex = newindex);
					}
				}
			});
		}
	},

	onLoad(e) {
		this.mid = e.id;

		this.currtenlyricupdate();
		// this.LikeMusic()
		// this.Audio()
		// 把本地保存的数据提取出来
		this.playlist = uni.getStorageSync('songsData');
		// 播放和更新
		getApp().globalData.audio;
		this.innerAudio.onTimeUpdate((res) => {
			this.$store.dispatch('changeCurrentTime', this.innerAudio.currentTime);
			if (!this.seek) {
				// console.log('重新更新')
				this.current = this.innerAudio.currentTime;
			}
			if (!this.duration) {
				this.duration = this.innerAudio.duration;
			}
			this.$store.state.playerTiem = this.innerAudio.currentTime;
		});

		this.innerAudio.onEnded(() => audioEnd());
	},

	computed: {
		userData() {
			return this.$store.getters.getCurrentSong;
		},
		// 播放标签状态
		audio() {
			return this.$store.state.audio;
		},
		// 歌词
		lyrics() {
			return this.$store.state.playMusicListData.lyrics;
		},
		// 当前播放歌曲URL
		playurl() {
			return this.$store.getters.getPlaySong;
		},
		// 播放模式
		currentModeIcon() {
			const loopModeMap = {
				list: 'icon-hanhan-01-01',
				single: 'icon-danqubofang',
				shuffle: 'icon-24gl-shuffle'
			};
			return loopModeMap[this.loopMode] || '';
		}
	},

	watch: {
		current(value) {
			if (this.duration > 0) {
				if (this.current === this.duration) {
					this.slideWidth = 100;
					return;
				}
				this.slideWidth = parseFloat((this.innerAudio.currentTime / this.innerAudio.duration) * 100);
			}
		}
	}
};
</script>

<style lang="scss" scoped>
* {
	touch-action: none;
}

//顶部占位
.status_bar {
	height: var(--status-bar-height);
	width: 100%;
}

.nav {
	width: 100vw;
	height: 90rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;

	&-left,
	&-right {
		width: 100rpx;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	&-center {
		flex: 1;
		// margin-top: 40rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		&-tx1 {
			color: #999;
			font-weight: bold;
		}

		&-tx2 {
			color: #c0c1bc;
			font-size: 25rpx;
			// border: 1px solid red;
		}
	}
}
.modes {
	color: #fff;
	font-size: 70rpx;
}

.contents {
	width: 100%;
	display: flex;
	flex-direction: column;
	font-family: STXihei;

	&-bg {
		position: absolute;
		left: 0;
		top: 0;
		width: 100vw;
		height: 100vh;
		background-size: auto 100%;
		background-position: center;
		filter: blur(60px);
		z-index: -1;
	}

	@keyframes wordsLoop {
		0% {
			transform: translateX(0px);
			-webkit-transform: translateX(0px);
		}

		100% {
			transform: translateX(-100%);
			-webkit-transform: translateX(-100%);
		}
	}

	@-webkit-keyframes wordsLoop {
		0% {
			transform: translateX(0px);
			-webkit-transform: translateX(0px);
		}

		100% {
			transform: translateX(-100%);
			-webkit-transform: translateX(-100%);
		}
	}

	&-play {
		width: 100%;
		height: 1000rpx;
		min-height: 500rpx;

		&-rotation {
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;

			&-needle {
				width: 240rpx;
				height: 280rpx;
				display: flex;
				margin-left: 7rem;
				margin-top: 50rpx;
				transform-origin: 0.3rem 0;
				transform: rotate(23deg);
				transition: all 1s;
				z-index: 10;
			}

			.active {
				width: 240rpx;
				height: 280rpx;
				display: flex;
				margin-left: 7rem;
				// margin-top: 50rpx;
				transform-origin: 0.3rem 0;
				transform: rotate(-10deg);
				transition: all 1s;
				z-index: 10;
			}

			&-disc {
				width: 540rpx;
				height: 540rpx;
				border-radius: 100%;
				margin-top: -50rpx;
				z-index: 5;
			}

			&-playimg {
				position: absolute;
				width: 340rpx;
				height: 340rpx;
				border-radius: 100%;
				margin-top: 290rpx;
				animation: play 20s linear infinite;
			}

			@keyframes play {
				0% {
					transform: rotate(0deg);
				}

				100% {
					transform: rotate(360deg);
				}
			}

			.play {
				animation-play-state: running;
			}

			.stop {
				-webkit-animation-play-state: paused !important;
				/* Safari 和 Chrome */
			}
		}
	}

	// 进度条
	&-duration {
		padding: 0 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		bottom: 15%;
		right: 0;
		left: 0;

		&-left,
		&-right {
			font-size: 20rpx;
		}

		&-progress {
			flex: 1;
		}
	}

	// 底部按钮
	&-footer-buttom {
		position: absolute;
		bottom: 35rpx;
		left: 0;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;

		image {
			width: 60rpx;
			height: 60rpx;
			padding: 0 40rpx;
		}

		&-play {
			image {
				width: 120rpx;
				height: 120rpx;
			}
		}
	}
}

.likes {
	margin-top: 10%;
	padding: 0 30rpx;
	display: flex;
	justify-content: space-between;
	// top: 150rpx;
	// bottom: 50rpx;
}
</style>
